<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>table</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/html5shiv.js"></script>
    <script src="../js/respondjs.js"></script>
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script>
        let arr = ['a', "b", "c", "d", "0", "1", "2", "3"];
        //页码
        let page = 1;
        //一页几条
        let pageCount = 7;
        //总条数
        let totalCount;
        //总页数
        let totalPage;
        let personList = [];

        function initArr() {
            for (let i = 0; i < 103; i++) {
                let name = "";
                for (let j = 0; j < 10; j++) {
                    name += arr[Math.floor(Math.random() * arr.length)];
                }
                let age = parseInt(Math.random() * (25 - 18 + 1)) + 18;
                let gender = Math.random() > 0.5 ? "男" : "女";
                personList.push({name, age, gender});
            }
            //本地存储
            localStorage.setItem("arr", JSON.stringify(personList));
            totalCount = personList.length;
            totalPage = Math.ceil(totalCount / pageCount);
        }

        //初始化页面数据
        function initPage(page) {
            personList = JSON.parse(localStorage.getItem("arr"));
            console.log(personList)
            $(".table").find("tr").not(":first").remove();
            let start = (page - 1) * pageCount;
            let end = start + pageCount;
            //console.log(start, end);
            for (let i = start; i < end; i++) {
                if (i >= totalPage) {
                    break;
                }
                let tr = $(`<tr>
                        <td>${i + 1}</td>
                        <td>${personList[i].name}</td>
                        <td>${personList[i].age}</td>
                        <td>${personList[i].gender}</td>
                     </tr>`);
                $(".table").append(tr);
            }
            $("td,th").addClass("text-center");
        }

        //初始化分页器
        function pageHandler() {
            let left = `<a type="button" class="btn btn-primary "
                                href="table.html?page=${(page - 1) <= 0 ? 1 : (page - 1)}">&lt;</a>`;
            $(".pageHandler").append(left);
            for (let i = 0; i < totalPage; i++) {
                let a = `<a type="button" class="btn btn-info"
                                href="table.html?page=${i + 1}">${i + 1}</a>`;
                $(".pageHandler").append(a);
            }
            let right = `<a type="button" class="btn btn-primary " href="table.html?page=${(page + 1) >= totalPage ? totalPage : (page + 1)}">&gt;</a>`;
            $(".pageHandler").append(right);
            $(".pageHandler").find("a").css("margin-left", "10px");
        }

        //页面加载执行
        $(function () {
            initArr();
            let search = location.search;
            //console.log(search);
            let id = search.substring(search.lastIndexOf("=") + 1);
            let p = parseInt(isNaN(id) ? 1 : id);
            initPage(p);
            pageHandler();
        });
    </script>
</head>
<body>
<div class="container">
    <!-- 表格，有边框，有hover效果，隔行换色 -->
    <table class="table table-bordered table-hover table-striped">
        <!-- 背景色是active -->
        <tr class="info">
            <th>index</th>
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
        <tr>
            <td>1</td>
            <td>tony</td>
            <td>18</td>
            <td>13099990000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>sam</td>
            <td>19</td>
            <td>13799990000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>sam</td>
            <td>19</td>
            <td>13799990000</td>
        </tr>
        <tr>
            <td>4</td>
            <td>sam</td>
            <td>19</td>
            <td>13799990000</td>
        </tr>
        <tr>
            <td>5</td>
            <td>sam</td>
            <td>19</td>
            <td>13799990000</td>
        </tr>
    </table>
    <div class="pageHandler text-center">
    </div>
</div>
</body>
</html>
